import { BasicColumn, BasicTable, FormSchema, useTable } from "@/components/Table";
import Toolbar from "@/components/ViewComponents/Toolbar";
import "./index.less";
import { useEffect, useState } from "react";
import { invoiceInfoApi } from "@/api/statisticalReport/departmentalFinancialAccounting";
import { Typography } from "antd";
import { useTranslation } from "react-i18next";
import { getSimpleDeptList } from "@/api/system/dept";

const { Text } = Typography;
const index = () => {
	const { t } = useTranslation();
	const en_vi = "statisticalReport.departmentalFinancialAccounting";
	const [expenditureTotal, setExpenditureTotal] = useState(0);
	const [incomeTotal, setIncomeTotal] = useState(0);
	const schemas: FormSchema[] = [
		{
			label: t(`${en_vi}.department`),
			field: "deptId",
			component: "ApiSelect",
			componentProps: {
				api: getSimpleDeptList,
				labelField: "name",
				valueField: "id"
			}
		},
		{
			label: t(`erp.warehouses.status`),
			field: "status",
			component: "Select",
			componentProps: {
				options: [
					{
						label: t(`${en_vi}.profit`),
						value: "1"
					},
					{
						label: t(`${en_vi}.loss`),
						value: "0"
					}
				]
			}
		}
	];
	const columns: BasicColumn[] = [
		{
			title: t(`${en_vi}.department`),
			dataIndex: "deptName"
		},
		{
			title: t(`${en_vi}.income`),
			dataIndex: "deptIncomeTotal"
		},
		{
			title: t(`${en_vi}.expenditure`),
			dataIndex: "deptExpenditureTotal"
		},
		{
			title: t(`${en_vi}.revenue`),
			dataIndex: "orderId",
			render: (_, record) => {
				console.log(record);

				return record.deptIncomeTotal - record.deptExpenditureTotal;
			}
		},
		{
			title: t(`erp.warehouses.status`),
			dataIndex: "orderId",
			render: (_, record) => {
				return record.deptIncomeTotal - record.deptExpenditureTotal > 0 ? t(`${en_vi}.profit`) : t(`${en_vi}.loss`);
			}
		}
	];
	const [registerTable] = useTable({
		api: invoiceInfoApi.invoiceInfoList,
		columns,
		useSearchForm: true,
		formConfig: {
			labelWidth: 120,
			schemas,
			showActionButtonGroup: true,
			showAdvancedButton: false,
			baseColProps: { span: 6 },
			actionColOptions: { span: 24 }
		},
		bordered: true
	});
	const handlerToolbarAction = async (key: string) => {
		console.log(key);
	};
	const getInvoiceInfoApi = async () => {
		const res = await invoiceInfoApi.invoiceInfoList({});
		setExpenditureTotal(res.expenditureTotal);
		setIncomeTotal(res.incomeTotal);
	};
	useEffect(() => {
		getInvoiceInfoApi();
	}, []);
	return (
		<div className="page departmentalFinancialAccounting">
			<div className="page-content">
				<div className="Accounting_herder flex">
					<div className="block">
						<Text type="warning">{t(`${en_vi}.totalIncome`)}</Text>
						<p>{incomeTotal}</p>
					</div>
					<div className="block">
						<Text type="danger">{t(`${en_vi}.totalExpenditure`)}</Text>
						<p>{expenditureTotal}</p>
					</div>
					<div className="block">
						<Text type="success">{t(`${en_vi}.totalRevenue`)}</Text>
						<p>{incomeTotal - expenditureTotal}</p>
					</div>
				</div>
				<BasicTable register={registerTable}></BasicTable>
			</div>
			<Toolbar action={handlerToolbarAction} btnList={["print"]} />
		</div>
	);
};

export default index;
